<template>
    <common-border-large width="100%" text="园区信息" height="79%">
        <div class="parkInfoContent">
            <CustomOverviewSiderLeftParkMoreInfo></CustomOverviewSiderLeftParkMoreInfo>
            <ul class="parkInforTab">
                <li v-for="(item, index) in state.parkTabInfoImg" :key="index">
                    <img :src="item.img" alt="" />
                    <p>{{ item.title }}</p>
                </li>
            </ul>
            <CustomOverviewSiderLeftParkEconomicsInfo></CustomOverviewSiderLeftParkEconomicsInfo>
            <CustomOverviewSiderLeftParkIncomeEchart></CustomOverviewSiderLeftParkIncomeEchart>
            <CustomOverviewSiderLeftParkProfitEchart></CustomOverviewSiderLeftParkProfitEchart>
        </div>
    </common-border-large>
    <common-border-large width="100%" text="企业统计" class="Enterprise" height="20%">
        <CustomOverviewSiderLeftEnterpriseStatisticsEchart></CustomOverviewSiderLeftEnterpriseStatisticsEchart>
    </common-border-large>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import park1 from '@img/park_1.png';
import park2 from '@img/park_2.png';
import park3 from '@img/park_3.png';

interface State {
    /** 园区信息3个tab图标* */
    parkTabInfoImg: Array<Overview.ParkTabIcon>;
}

const state: State = reactive({
    parkTabInfoImg: [
        {
            img: park1,
            title: '安全报告'
        },
        {
            img: park2,
            title: '环保报告'
        },
        {
            img: park3,
            title: '综合应急预案'
        }
    ]
});
</script>
<style scoped lang="scss">
.parkInfoContent {
    height: calc(100% - 22px);
    .more_info {
        margin-top: 10px;
    }
    .income {
        margin-top: 14px;
        height: calc(25% - 16px);
    }
    .parkInforTab {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        li {
            text-align: center;
        }
        img {
            width: 20px;
            height: auto;
        }
        p {
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
    }
    ::v-deep(.economics) {
        margin-top: 10px;
    }
}
.Enterprise {
    margin-top: 10px;
}
</style>
